<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="">
  <meta name="format-detection" content="telephone=no">
  <meta name="full-screen" content="yes">
  <meta name="x5-page-mode" content="app">
  <meta name="x5-fullscreen" content="true">
  <meta name="browsermode" content="application">
  <meta content="" name="keywords">
  <meta content="" name="description">
  <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
  <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
  <link rel="stylesheet" href="./js/layer_mobile/need/layer.css">
  <link rel="stylesheet" href="./css/style.css?ver=1.0">
  <link rel="stylesheet" href="./js/dropload/dropload.css">
  <title>活动列表</title>
</head>
<body>
  <style>
    body { background-color: #f7f7f7; }
    .article_area { padding: 5px 15px; }
    .article_item { display: block; background-color: #fff; border-radius: 5px; overflow: hidden; box-shadow: 0px 0px 10px 2px #f3f3f3,0px 0px 10px 2px #e3e3e3; }
    .img-box { width: 100%; height: 130px; background-size: cover; background-position: center; background-repeat: no-repeat; }
    .article_info { padding: 8px 10px; }
    .article_info .title { font-size: 14px; line-height: 1.4; color: #333; margin-bottom: 4px; }
    .article_info .time { color: #666; font-size: 12px; }
    .load_more_btn { background-color: transparent; color: #333; border: 1px solid #cfcfcf; width: calc(100% - 30px); margin: 10px auto; display: block; }
    .load_more_btn[disabled] { background-color: #efefef; color: #999; }
    .gj-wrap { height: 100vh; overflow: hidden; padding: 5px 15px; }
    .gj-item { height: 130px; margin-bottom: 15px; border-radius: 5px; }
  </style>


  <script id="article_area" type="text/html">
    <div id="articles">
      {{#
        for(var i=0; i<d.length; i++) {
          var item = d[i];
      }}
        <div class="article_area">
          <a class="article_item" href="detail.html?id={{ item.id }}">
            <div class="img-box" style="background-image: url({{ item.image }})"></div>
            <div class="article_info">
              <h2 class="title ellipsis-2">{{ item.title }}</h2>
              <p class="time text-right">{{ tools.filterTime(item.create_time, "yyyy-MM-dd hh:mm") }}</p>
            </div>
          </a>
        </div>
      {{# } }}
    </div>
  </script>
  <div id="article_list"></div>
  <div class="dropload-down"><div class="dropload-refresh">↑上拉加载更多</div></div>
  


  <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
  <script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
  <script src="./js/dropload/dropload.min.js"></script>
  <script src="./js/tools2.js?ver=2.3"></script>
  <script src="./js/jweixin-1.4.0.js?ver=1.0"></script>
  <script src="./js/layer_mobile/layer.js"></script>
  <script src="./js/layer_mobile/laytpl.js"></script>
  <script>
    // var vConsole = new VConsole();
    var articleArea = $('#article_area').html();
    var articleData = [];
    var page = 0;

    $(function() {
      tools.login(function() {
        $('#articles').dropload({
          scrollArea : window,
          loadDownFn: function(me) {
            page++;
            tools.ajax({
              url: '/article',
              data: { page: page },
              success: function(res) {
                if(res.code == 0 && res.data.data && res.data.data.length > 0) {
                  articleData = articleData.concat(res.data.data);
                } else {
                  me.lock();
                  me.noData();
                }
                laytpl(articleArea).render(articleData, function(html) {
                  $('#article_list').html(html);
                  me.resetload();
                })
              },
              error: function(err) {
                // me.resetload();
                me.lock();
                me.noData();
                if(err.status === 403) {
                  tools.wxLogin();
                } else {
                  layer.open({ content: '网络连接出错', skin: 'msg', time: 2 });
                }
              }
            })
          }
        })
      })

      wx.ready(function() {
        tools.share({title: "活动列表"});
      })
    })
  </script>
</body>
</html>